<template>
  <div id="my-project-item">
    {{projectName}} - {{type || "个人项目"}}

    <i class="setting el-icon-setting"></i>
  </div>
</template>

<script>
export default {
  name: "my-project-item",
  props:{
    projectName:String,
    type: String
  }
}
</script>

<style scoped lang="less">
  #my-project-item{
    background-color: #5D3D5E;
    color: whitesmoke;
    padding:4px 0px 4px 10px;
    transition: 500ms;
    user-select: none;
    cursor: pointer;
    border-bottom: 1px wheat solid;
    &:hover{
      background-color: #3F0E40;
      padding-left: 15px;
      //transform: scale(1.03);
    }
    .setting{
      float: right;
      margin-right: 20px;
      &:hover{
        color: #26A2C1;
        &:after{
          content: " 设置";
          transition: 1s;
          width: fit-content;
        }
      }
    }
  }
</style>